import path from "path";
import {
	defineConfig
} from 'vite'
import vue from '@vitejs/plugin-vue'

// 自动引入
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import {
	ElementPlusResolver
} from 'unplugin-vue-components/resolvers'
// 手动导入
import ElementPlus from 'unplugin-element-plus/vite'

// https://vitejs.dev/config/
export default defineConfig({
	base: '/v3-plus',
	resolve: {
		alias: {
			// 配置资源路径
			"@/": `${path.resolve(__dirname, "src")}/`,
		},
	},
	css: {
		preprocessorOptions: {
			scss: {
				// 自定义的主题色
				additionalData: `@use "@/styles/element/index.scss" as *;`,
			},
		},
	},
	// 打包配置
	build: {
		target: 'modules',
		outDir: 'dist', //指定输出路径
		assetsDir: 'assets', // 指定生成静态资源的存放路径
		minify: 'terser' // 混淆器，terser构建后文件体积更小
	},
	server: {
		port: 3001,
		// open: true,
		// proxy: { // 代理配置
		//   '/dev': 'https://www.fastmock.site/mock/48cab8545e64d93ff9ba66a87ad04f6b/'
		// },
	},
	plugins: [
		vue(),
		// 额外配置了手动引入修改主题色，在代码中不引入ElMessage直接使用的话tslint会报错，引入的话主题色又会被覆盖，只能再配置手动引入的
		ElementPlus({
		  useSource: true,
		}),
		// 自动引入
		AutoImport({
			resolvers: [ElementPlusResolver({
				// 自动引入修改主题色添加这一行，使用预处理样式，不添加将会导致使用ElMessage，ElNotification等组件时默认的主题色会覆盖自定义的主题色
				importStyle: "sass",
			})],
		}),
		Components({
			resolvers: [ElementPlusResolver({
				// 自动引入修改主题色添加这一行，使用预处理样式
				importStyle: "sass",
			})],
		}),
	],
});
